<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="140px">
      <el-row class="bottomLine">
        <el-form-item label="应用:" label-width="40">
          <el-select v-model="queryParams.applicationCode" multiple placeholder="请选择应用">
            <el-option
              v-for="dict in applicationList"
              :key="dict.appCode"
              :label="dict.name"
              :value="dict.appCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <div class="bottomLine">按顺序配置后进行查询
        <div style="width:80px;display: block;float: right;">
          <i class="el-icon-refresh"></i>
          重置
        </div>
      </div>
      <el-form-item label="参与分析的事件" prop="status" class="bottomLine">
        <el-popover
          ref="popover"
          placement="bottom-start"
          width="650"
          trigger="click"
        >
          <el-transfer
            filterable
            :titles="['所有事件', '分组']"
            :filter-method="filterMethod"
            filter-placeholder="请输入关键字"
            v-model="value"
            :props="{
                key: 'eventType',
                label: 'eventTypeName'
              }"
            :data="eventTypeOptions">
            <el-button class="transfer-footer" type="success" slot="right-footer" size="small" @click="confirmSelectFun">确  认</el-button>
          </el-transfer>
          <el-input slot="reference" v-model="queryParams.eventGroupName" placeholder="点击选择事件" readonly
                    style="width: 300px;" suffix-icon="el-icon-arrow-down">
          </el-input>
        </el-popover> &nbsp;{{queryParams.eventGroupName.length>0?queryParams.eventGroupName.length+'个':''}}
        <el-link type="primary" :underline="false" style="padding-left:20px;" @click="addAnalyRule()" :disabled="queryParams.analyRule.length===queryParams.eventGroup.length">
          <i class="el-icon-plus"></i> <span class="innerContent">筛选或分组</span>
        </el-link>
        <el-row v-show="queryParams.analyRule.length>0"  class="bottomLine">
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
            <p v-for="(group,index) in queryParams.analyRule">
              <el-select v-model="group.eventGroup" style="width:120px" value-key="eventType">
                <el-option
                  v-for="dict in queryParams.eventGroup"
                  :key="dict.eventType"
                  :label="dict.eventTypeName"
                  :value="dict"
                />
              </el-select>
              按
              <el-select v-model="group.eventType" style="width:120px" value-key="id">
                <el-option
                  v-for="dict in eventItemData"
                  :key="dict.eventItemCode"
                  :label="dict.eventItemName"
                  :value="dict"
                />
              </el-select>
              查看
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                       @click="removeRule(queryParams.analyRule,index)">
                <i class="el-icon-remove"></i>
              </el-link>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                       @click="addRule(group.queryItems,index)">
                <i class="el-icon-puls"></i>筛选
              </el-link>


              <el-row v-show="group.queryItems.length>0"  class="bottomLine">
                <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
                <p v-for="(eventItem,index) in group.queryItems">
                  <el-select v-model="eventItem.eventType" style="width:120px">
                    <el-option
                      v-for="dict in eventTypeOptions"
                      :key="dict.id"
                      :label="dict.eventTypeName"
                      :value="dict.id"
                    />
                  </el-select>
                  <el-select v-model="eventItem.eventItem" style="width:120px" value-key="id">
                    <el-option
                      v-for="dict in allEventItemListOpts[eventItem.eventType]"
                      :key="dict.id"
                      :label="dict.eventItemName"
                      :value="dict"
                    />
                  </el-select>
                  <el-select v-model="eventItem.eventItemExpression" style="width:120px">
                    <el-option
                      v-for="dict in eventPropertysOptions[eventItem.eventItem.valueType]"
                      :key="dict.id"
                      :label="dict.eventItemExpression"
                      :value="dict.eventItemCode"
                    />
                  </el-select>
                  <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                            v-show="eventItem.eventItemExpression!='between'"></el-input>
                  <span v-show="eventItem.eventItemExpression=='between'">
                        <el-input v-model="eventItem.value1Str" type="text" controls-position="right"
                                  style="width:90px"></el-input>与
                        <el-input v-model="eventItem.value2Str" type="text" controls-position="right"
                                  style="width:90px"></el-input>之间
                    </span>
                  <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                           @click="removeRule(group.queryItems,index)">
                    <i class="el-icon-remove"></i>
                  </el-link>
                </p>
            </el-form-item>
          </el-row>

            </p>
          </el-form-item>
        </el-row>
      </el-form-item>
      <el-form-item label="选择起始/结束事件" prop="startFlag"  class="bottomLine" >
        <el-radio-group v-model="queryParams.startFlag" size="medium">
          <el-radio-button label="起始事件" value="start"></el-radio-button>
          <el-radio-button label="结束事件" value="end"></el-radio-button>
        </el-radio-group>
        为
        <el-select v-model="queryParams.startEvent"   size="small" value-key="eventType">
          <el-option
            v-for="dict in queryParams.eventGroup"
            :key="dict.eventType"
            :label="dict.eventTypeName"
            :value="dict"
          />
        </el-select>
        <el-link type="primary" :underline="false" style="padding-left:20px;" @click="addRule(queryParams.startRule)">
          <i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
        </el-link>
        <el-row v-show="queryParams.startRule.length>0"  class="bottomLine">
          <el-form-item label="" style="display: block;padding-left:60px;" label-width="60px">
						<AndOrLine style="height: calc(100% - 10px);transform: translateY(10px);" v-show="queryParams.startRule.length>1" v-model="queryParams.eventConditionRelation"></AndOrLine>
            <p style="margin: 10px 0 0;" v-for="(eventItem,index) in queryParams.startRule">
              <el-select v-model="eventItem.eventType" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventTypeOptions"
                  :key="dict.id"
                  :label="dict.eventTypeName"
                  :value="dict.id"
                />
              </el-select>
              <el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 10px;" value-key="id">
                <el-option
                  v-for="dict in allEventItemListOpts[eventItem.eventType]"
                  :key="dict.id"
                  :label="dict.eventItemName"
                  :value="dict"
                />
              </el-select>
              <el-select v-model="eventItem.eventItemExpression" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventPropertysOptions[eventItem.eventItem.valueType]"
                  :key="dict.id"
                  :label="dict.eventItemExpression"
                  :value="dict.eventItemCode"
                />
              </el-select>
              <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                        v-show="eventItem.eventItemExpression!='between'"></el-input>
              <span v-show="eventItem.eventItemExpression=='between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right"
                          style="width:90px"></el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right"
                          style="width:90px"></el-input>之间
            </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                       @click="removeRule(queryParams.startRule,index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>

          </el-form-item>
        </el-row>
      </el-form-item>
      <el-form-item label="" prop="status" class="bottomLine">
        <el-link type="primary" :underline="false" @click="addRule(queryParams.globalRule)">
          <i class="el-icon-plus"></i> <span class="innerContent">全局筛选</span>
        </el-link>
        <el-row v-show="queryParams.globalRule.length>0"  class="bottomLine">
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
						<AndOrLine style="height: calc(100% - 10px);" v-show="queryParams.globalRule.length>1" v-model="queryParams.globalConditionRelation"></AndOrLine>
            <p style="margin: 0 0 10px;" v-for="(eventItem,index) in queryParams.globalRule">
              <el-select v-model="eventItem.eventType" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventTypeOptions"
                  :key="dict.id"
                  :label="dict.eventTypeName"
                  :value="dict.id"
                />
              </el-select>
              <el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 10px;" value-key="id">
                <el-option
                  v-for="dict in allEventItemListOpts[eventItem.eventType]"
                  :key="dict.id"
                  :label="dict.eventItemName"
                  :value="dict"
                />
              </el-select>
              <el-select v-model="eventItem.eventItemExpression" style="width:120px;margin-right: 10px;">
                <el-option
                  v-for="dict in eventPropertysOptions[eventItem.eventItem.valueType]"
                  :key="dict.id"
                  :label="dict.eventItemExpression"
                  :value="dict.eventItemCode"
                />
              </el-select>
              <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                        v-show="eventItem.eventItemExpression!='between'"></el-input>
              <span v-show="eventItem.eventItemExpression=='between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right"
                          style="width:90px"></el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right"
                          style="width:90px"></el-input>之间
            </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                       @click="removeRule(queryParams.globalRule,index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>

          </el-form-item>
        </el-row>
      </el-form-item>
      <el-row  class="bottomLine">
        <el-form-item label="设置 Session 间隔">
        <el-input  v-model="queryParams.timeValue" type="number"> </el-input>
        </el-form-item>
        <el-select v-model="queryParams.timeUnit" placeholder="请选择">
          <el-option label="秒" value="sec"></el-option>
          <el-option label="分钟" value="min"></el-option>
          <el-option label="小时" value="hour"></el-option>
        </el-select>
      </el-row>
      <el-row  class="bottomLine" style="padding-left:20px;">
        <el-button type="success" icon="el-icon-search" @click="queryPathDtaFun">查询</el-button>
      </el-row>
    </el-form>
    <el-container>

      <el-main>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-date-picker
              v-model="queryParams.dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-col>
          <el-col :span="5" style="float: right">
            每层最多显示 <el-input v-model="showNum" type="number" style="width:60px;"></el-input> 个节点
          </el-col>
        </el-row>
        <path-chart :chartData="pathChartData" :className="chart"/>
      </el-main>

    </el-container>
  </div>
</template>

<script>
import {getActionPathDataFun, getAllSiteFlowList, getSpreadDataFun} from "@/api/analytics/basemeasure";
import PathChart from "@/views/report/actionpath/comments/PathChart";
import AndOrLine from '@/components/AndOrLine/index.vue'
import {allEventItemsOptions, eventItemsOptions, eventTypeOptions, listItem} from "@/api/config/item";
import {listAllPropertyResult, listPropertyByType} from "@/api/config/property";
import Page401 from "@/views/error/401";
import {getAllEventMethodResult} from "@/api/config/emethod";
import {listApplication} from "@/api/config/application";
import {listType} from "@/api/config/type";


export default {
  name: "actionpath",
  components: {
    Page401,
    PathChart,
		AndOrLine,
  },
  data() {
    return {
      showNum:7,
      className:'chart',
      switchValue: false,
      startFlag:'start',
      statusOptions: [],
      eventItemData: [],
      params: {
        dateRange: ''
      },
      data:[],
      value: [],
      pathChartData: { },
      // 遮罩层
      loading: true,

      // 查询参数
      queryParams: {
        applicationCode:[],
        eventGroupId:[],
        eventGroupName:[],
        analyRule:[],
        startFlag:'start',
        startEvent:{},
        eventGroup:[],
        globalRule:[],
        startRule:[],
        timeValue:undefined,
        timeUnit:'sec',
        dateRange:[],
				eventConditionRelation: 'and',
				globalConditionRelation: 'and',
      },
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay() || 7;
            var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 - day);
            picker.$emit('pick', [newStart, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      drawer: false,
      direction: 'rtl',
      formLabelWidth: '90px',
      index: 1,
      ruleTypes3Flag: 0,
      eventTypeOptions: [],
      eventItemsOptions: [],
      referrerTypeOptions: [],
      allEventItemListOpts:{},
      eventPropertysOptions:{},
      applicationList:[],
      // 表单参数
      form: {}
    };
  },
  created() {
    this.queryPathDtaFun();
    this.getApplicationList();
    this.getEventItemFun();
    this.getEventTypeList();
    this.getAllEventItemsList();

  },
  methods: {
    getApplicationList() {
      listApplication({status: 'Y'}).then(response => {
        this.applicationList = response.rows;
        let that = this;
        this.applicationList.forEach(function (app) {
          if (app.defaultFlag === 'Y') {
            that.queryParams.applicationCode.push(app.appCode);
          }
        });
      });
    },
    filterMethod(query, item) {
      return item.eventTypeName.indexOf(query) > -1;
    },
    getEventItemFun(){
      listItem({}).then(response => {
        this.eventItemData = response.rows;
      });
    },
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },
    confirmSelectFun(){
      console.log(this.value);
      this.queryParams.eventGroupId=this.value;
      this.queryParams.eventGroupName=[];
      let that=this;
      this.value.forEach(id=>{
        let event=that.eventTypeOptions.find(event=>event.eventType===id);
        if(event){
          that.queryParams.eventGroupName.push(event.eventTypeName);
          let group={
            eventType:id,
            eventTypeName:event.eventTypeName
          };
          that.queryParams.eventGroup.push(group);
        }
      })
      this.$refs.popover.showPopper=false;
    },
    getAllEventItemsList(){
      allEventItemsOptions().then(response => {
        this.allEventItemListOpts = response.data;
      });
      listAllPropertyResult().then(response => {
        this.eventPropertysOptions = response.data;
      });
      getAllEventMethodResult().then(response => {
        this.allEventItemMethodOpts = response.data;
      });
    },
    getEventTypeList() {
      var param = {status: 'Y'};
      eventTypeOptions(param).then(response => {
        this.eventTypeOptions = response.data;
      });
    },

    addRule(array){
      let eventItem={
        eventType:'',
        eventItem:{},
        eventItemExpression:'',
        valueType:'',
        value1Str:'',
        value2Str:'',
      };
      array.push(eventItem);
    },

    removeRule(array,index){
      array.splice(index,1);
    },
    addAnalyRule(){
      let group={
        eventGroup:{},
        eventType:{},
        queryItems:[]
      };
      this.queryParams.analyRule.push(group);
    },
    queryPathDtaFun(){
      console.log(this.queryParams);
      this.loading=true;
      let requestJson=JSON.stringify(this.queryParams);
      getActionPathDataFun({requestJson:requestJson}).then(response => {
        console.log('33333333333333333333')
        console.log(response.data);
        this.pathChartData= response.data;
        this.loading=false;
      });
    }
  }


};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px;
}
.innerContent {
  font-size: 14px;
  line-height: 20px;
  color: #307ef2;
  cursor: pointer;
}
.bottomLine{
  width:100%;
  display:inline-block;
  border-bottom: 1px solid #e9f0f7;
  margin-bottom: 10px;
  padding-bottom:10px;
}
.transfer-footer {
  float: right;
}

</style>
